<template>
  <div class="home-swiper">
    <swiper :modules="modules" :pagination="{ clickable: true }">
      <swiper-slide v-for="item in slideList" :key="item.key">
        <img :src="getImagePath(item.image)" />
      </swiper-slide>
    </swiper>
  </div>
</template>

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/navigation'
import { Pagination } from 'swiper/modules'

import { getImagePath } from '@/utils/importImg.js'

const slideList = [
  { image: 'home-img3.png', key: 1 },
  { image: 'home-img3.png', key: 2 },
  { image: 'home-img3.png', key: 3 }
]

const modules = [Pagination]
</script>

<style lang="scss" scoped>
.home-swiper {
  position: relative;
  .swiper-slide {
    font-size: 0;
    img {
      width: 100%;
    }
  }
  :deep(.swiper-pagination) {
    position: absolute;
    width: 100%;
    bottom: 24px;
    text-align: center;
    z-index: 99;
    font-size: 0;
  }
  :deep(.swiper-pagination-bullet) {
    width: 16px;
    height: 16px;
    display: inline-block;
    background: #fff;
    opacity: 0.5;
    border-radius: 24px;
    margin: 0 8px;
    &.swiper-pagination-bullet-active {
      width: 32px;
      opacity: 1;
    }
  }
}
</style>
